<template>
   <a-layout class="home-layout">
      <a-layout-content>
        <div class="welcome-container-inner">
          <a-row>
            <a-col :span="8" class="feature-item">
              <Html5TwoTone />
              <h3>专注H5 始终如一</h3>
              <p>三年保持行业领先</p>
            </a-col>
            <a-col :span="8" class="feature-item">
              <BuildTwoTone />
              <h3>海量 H5 模版</h3>
              <p>一键生成，一分钟轻松制作</p>
            </a-col>
            <a-col :span="8" class="feature-item">
              <BulbTwoTone />
              <h3>极致体验</h3>
              <p>用户的一致选择</p>
            </a-col>
          </a-row>
        </div>
        <div class="content-container">
          <TemplateList :list="templates"/>
        </div>
      </a-layout-content>
    </a-layout>
</template>

<script lang="ts" setup>
import TemplateList from '@/components/TemplateList.vue'
import { useTemplatesStore } from '@/stores/index'
const { templates } = useTemplatesStore()
</script>

<style lang="less" scoped>
.home-layout {
  .ant-layout-content {
    background-color: #fff;
    padding-top: 24px;
    .welcome-container-inner {
      max-width: 1200px;
      margin: 0 auto;
      .feature-item {
        text-align: center;
        padding: 20px 0;
      }
      .feature-item .anticon {
        font-size: 60px;
      }
      .feature-item p {
        color: #666;
      }
      .feature-item h3 {
        margin: 5px 0;
        font-size: 19px;
        color: #333;
      }
    }
  }
}
</style>